<template>
  <tm-app>
    <tm-sheet>
      <!-- 选项卡的数据切换 -->
      <tm-tabs
        :width="636"
        :height="300"
        :list="tabsTitle"
        :default-name="seckillSkuVoData.skuId"
        :active-name="seckillSkuVoData.skuId"
        @change="changeNav"
      ></tm-tabs>
      <tm-sheet :margin="[0]" :padding="[0]">
        <tm-text>当前时间段秒杀状态为：</tm-text>
        <text class="text-red text-size-s">{{ getSeckillStatus }}</text>
      </tm-sheet>
      <scroll-view scroll-y class="gui-sv">
        <!-- 选项卡的内容切换 -->
        <!-- <view class="flex flex-col" v-for="item in IndexStore.seckillSkuVoList" :key="item.skuId"> -->
        <tm-image :src="seckillSkuVoData.imgUrl" :width="600" :height="450"></tm-image>
        <tm-text :font-size="40" _class="text-weight-b" :label="seckillSkuVoData.skuName"></tm-text>
        <tm-text :label="'限购数量：' + seckillSkuVoData.seckillLimit + ' 件'"></tm-text>
        <tm-text :label="'销售量：' + seckillSkuVoData.seckillSale + ' 件'"></tm-text>
        <tm-text :label="'库存：' + seckillSkuVoData.seckillStock + ' 件'"></tm-text>
        <view class="flex flex-row flex-row-center-between">
          <!-- 价格颜色红色 -->
          <tm-text color="red" :label="'秒杀价：￥' + seckillSkuVoData.seckillPrice + '元'"></tm-text>
          <tm-button color="red" size="normal" label="立即抢购" :round="20" @click="Pay(seckillSkuVoData)"></tm-button>
        </view>
        <!-- </view> -->
      </scroll-view>
    </tm-sheet>
  </tm-app>
</template>

<script lang="ts" setup>
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmTabs from '@/tmui/components/tm-tabs/tm-tabs.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import { useIndexStore } from '@/store/modules/IndexStore'
import { computed, onMounted, ref } from 'vue'
const IndexStore = useIndexStore()
const tabsTitle = ref<{ key: number; title: string }[]>([])
const seckillSkuVoData = ref<dataInterface>({})
interface dataInterface {
  _id: string
  _v: number
  endTime: string
  startTime: string
  timeName: string
  skuId: number
  skuName: string
  imgUrl: string
  seckillLimit: number
  seckillSale: number
  seckillStock: number
  seckillskuId: number
  seckillPrice: number
}
onMounted(() => {
  const tabsTitleLs = []
  IndexStore.seckillSkuVoList.forEach((ele) => {
    tabsTitleLs.push({
      key: ele.skuId,
      title: ele.skuName,
    })
  })
  tabsTitle.value = tabsTitleLs
  seckillSkuVoData.value = IndexStore.seckillSkuVoList[0]
})
const getSeckillStatus = computed(() => {
  if (IndexStore.seckillTime.timeStaus === 1) {
    return '已开抢'
  } else if (IndexStore.seckillTime.timeStaus === 2) {
    return '未开始'
  } else {
    return '已结束'
  }
})
const Pay = (data: dataInterface) => {
  console.log(data)
}
const changeNav = (navId: number) => {
  seckillSkuVoData.value = IndexStore.seckillSkuVoList(Number(navId))
}
</script>

<style lang="scss">
.gui-sv {
  height: calc(100vh - 104rpx - 140rpx);
}
</style>
